<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <link rel="stylesheet" href="/css/wmd.css" type="text/css" />

  </head>
  <body>
      <div>
          <form method="post" action="/article/edit/{$article.id}">
              <input type="hidden" name="id" value="{$article.id}" />
              <div>
                  <label>标题</label>
                  <input name="title" type="text" value="{$article.title}" />
              </div>
              <div class="wmd-editor">
                  <div id="wmd-button-bar"></div>
                  <textarea name="content" id="wmd-input" rows="8">{$article.content}</textarea>
                  <div id="wmd-preview" class="wmd-preview"></div>
              </div>
              <div>
                  <label>Tags</label>
                  <input name="tags" type="text" value="{$article.tags}" />
              </div>
              <div><button type="submit">提交</button></div>
          </form>
      </div>
      <script type="text/javascript" src="/js/jquery.min.js"></script>
      <script type="text/javascript" src="/js/wmd.js"></script>
      <script type="text/javascript" src="/js/showdown.js"></script>
      <script type="text/javascript" src="/js/prettify.js"></script>
      <script type="text/javascript">
			(function($) {
				var f = $;
				var i,
				g;
				var c = 0;
				var h = 32;
				var b;
				f.fn.TextAreaResizer = function() {
					return this.each(function() {
						i = f(this);
						g = null;
						var drag = f('<div class="grippie"></div>').bind("mousedown", {
							el: this
						},
						j);
						drag.insertAfter(f(this));
						//f(this).parent().append();
						var k = f("div.grippie", f(this).parent())[0];
						k.style.marginRight = (k.offsetWidth - f(this)[0].offsetWidth) + "px"
					})
				};
				function j(k) {
					i = f(k.data.el);
					i.blur();
					c = d(k).y;
					g = i.height() - c;
					i.css("opacity", 0.25);
					f(document).mousemove(e).mouseup(a);
					return false
				}
				function e(m) {
					var k = d(m).y;
					var l = g + k;
					if (c >= (k)) {
						l -= 5
					}
					c = k;
					l = Math.max(h, l);
					i.height(l + "px");
					if (l < h) {
						a(m)
					}
					return false
				}
				function a(k) {
					f(document).unbind("mousemove", e).unbind("mouseup", a);
					i.css("opacity", 1);
					i.focus();
					i = null;
					g = null;
					c = 0
				}
				function d(k) {
					return {
						x: k.clientX + document.documentElement.scrollLeft,
						y: k.clientY + document.documentElement.scrollTop
					}
				}

				function styleCode()
				{
					if (typeof disableStyleCode != "undefined")
					{
						return;
					}

					var a = false;

					$("pre code").each(function()
					{
						if (!$(this).hasClass("prettyprint"))
						{
							$(this).addClass("prettyprint");
							a = true
						}
					});

					if (a) { prettyPrint() }
				}


				//highlight
				styleCode();

				setup_wmd({
					input: "wmd-input",
					button_bar: "wmd-button-bar",
					preview: "wmd-preview"
					//output: "wmd-copy_html"
				});

				$('#wmd-input').TextAreaResizer();


				$.fn.insertAtCaret = function (myValue) {
						return this.each(function(){
								//IE support
								if (document.selection) {
										this.focus();
										sel = document.selection.createRange();
										sel.text = myValue;
										this.focus();
								}
								//MOZILLA/NETSCAPE support
								else if (this.selectionStart || this.selectionStart == '0') {
										var startPos = this.selectionStart;
										var endPos = this.selectionEnd;
										var scrollTop = this.scrollTop;
										this.value = this.value.substring(0, startPos)
													  + myValue
											  + this.value.substring(endPos, this.value.length);
										this.focus();
										this.selectionStart = startPos + myValue.length;
										this.selectionEnd = startPos + myValue.length;
										this.scrollTop = scrollTop;
								} else {
										this.value += myValue;
										this.focus();
								}
						});

				};

			})(jQuery);
      </script>
  </body>
</html>
